<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>测测你是哪种美食</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/text.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/swiper.min.js"></script>
</head>
<body>
<!--滑动开始-->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!--第一题-->
        <div class="swiper-slide Slide-1">
            <header flex="main:center cross:center">
                <h1>美食测试</h1>
                <span>01</span>
                <p>/05</p>
            </header>
            <section class="content" flex="main:center">
                <h1>题目：粽子是蘸着糖吃还是蘸酱油吃？</h1>
            </section>
            <section>
                <input type="radio" id="A" name="select" class="my-radio"/>
                <label class="bg" flex="cross:center" for="A">
                    A：甜粽子党
                </label>

                <input type="radio" id="B" name="select" class="my-radio"/>
                <label class="bg" flex="cross:center" for="B">
                    B：咸粽子党
                </label>

                <input type="radio" id="C" name="select" class="my-radio"/>
                <label class="bg" flex="cross:center" for="C">
                    C：一半是糖咸到忧伤
                </label>

                <input type="radio" id="D" name="select" class="my-radio"/>
                <label class="bg" flex="cross:center" for="D">
                    D：我就打酱油路过
                </label>
            </section>
            <div flex="main:center" class="btnGroup">
                <button class="next">下一题</button>
            </div>

        </div>

        <!--第二题-->
        <div class="swiper-slide Slide-2">
            <header flex="main:center cross:center">
                <h1>美食测试</h1>
                <span>02</span>
                <p>/05</p>
            </header>
            <section class="content" flex="main:center">
                <h2>题目：吃香蕉是从头扒着吃还是从尾部扒着吃？</h2>
            </section>
            <section>
                <input type="radio" id="E" name="select-1" class="my-radio"/>
                <label class="bg" flex="cross:center" for="E">
                    A：头部
                </label>

                <input type="radio" id="F" name="select-1" class="my-radio"/>
                <label class="bg" flex="cross:center" for="F">
                    B：尾部
                </label>

                <input type="radio" id="G" name="select-1" class="my-radio"/>
                <label class="bg" flex="cross:center" for="G">
                    C：从中间切开吃
                </label>

                <input type="radio" id="H" name="select-1" class="my-radio"/>
                <label class="bg" flex="cross:center" for="H">
                    D：一般选择躺着吃
                </label>
            </section>
            <div flex="main:justify cross:center" class="btnGroup">
                <button class="prev">上一题</button>
                <button class="next">下一题</button>
            </div>

        </div>

        <!--第三题-->
        <div class="swiper-slide Slide-3">
            <header flex="main:center cross:center">
                <h1>美食测试</h1>
                <span>03</span>
                <p>/05</p>
            </header>
            <section class="content" flex="main:center">
                <h1>题目：你的冰箱里面会屯着很多零食吗？</h1>
            </section>
            <section>
                <input type="radio" id="I" name="select-2" class="my-radio"/>
                <label class="bg" flex="cross:center" for="I">
                    A：多的塞不下
                </label>

                <input type="radio" id="J" name="select-2" class="my-radio"/>
                <label class="bg" flex="cross:center" for="J">
                    B：空空如也
                </label>

                <input type="radio" id="K" name="select-2" class="my-radio"/>
                <label class="bg" flex="cross:center" for="K">
                    C：我没有钱
                </label>

                <input type="radio" id="L" name="select-2" class="my-radio"/>
                <label class="bg" flex="cross:center" for="L">
                    D：请求国家分配对象买零食
                </label>
            </section>
            <div flex="main:justify cross:center" class="btnGroup">
                <button class="prev">上一题</button>
                <button class="next">下一题</button>
            </div>
        </div>

        <!--第四题-->
        <div class="swiper-slide Slide-4">
            <header flex="main:center cross:center">
                <h1>美食测试</h1>
                <span>04</span>
                <p>/05</p>
            </header>
            <section class="content" flex="main:center">
                <h2>题目：睡梦中吃糕点，第二天清醒会去购买吗？</h2>
            </section>
            <section>
                <input type="radio" id="M" name="select-3" class="my-radio"/>
                <label class="bg" flex="cross:center" for="M">
                    A：必须买买买
                </label>

                <input type="radio" id="N" name="select-3" class="my-radio"/>
                <label class="bg" flex="cross:center" for="N">
                    B：睡醒就忘了
                </label>

                <input type="radio" id="O" name="select-3" class="my-radio"/>
                <label class="bg" flex="cross:center" for="O">
                    C：我没有钱
                </label>

                <input type="radio" id="P" name="select-3" class="my-radio"/>
                <label class="bg" flex="cross:center" for="P">
                    D：让我在梦里甜蜜的活着吧
                </label>
            </section>
            <div flex="main:justify cross:center" class="btnGroup">
                <button class="prev">上一题</button>
                <button class="next">下一题</button>
            </div>
        </div>

        <!--第五题-->
        <div class="swiper-slide Slide-5">
            <header flex="main:center cross:center">
                <h1>美食测试</h1>
                <span>05</span>
                <p>/05</p>
            </header>
            <section class="content" flex="main:center">
                <h1>题目：新出的网红店一推出就会去打卡吗？</h1>
            </section>
            <section>
                <input type="radio" id="Q" name="select-4" class="my-radio"/>
                <label class="bg" flex="cross:center" for="Q">
                    A：必然去去去
                </label>

                <input type="radio" id="R" name="select-4" class="my-radio"/>
                <label class="bg" flex="cross:center" for="R">
                    B：太挤了不去
                </label>

                <input type="radio" id="S" name="select-4" class="my-radio"/>
                <label class="bg" flex="cross:center" for="S">
                    C：吃瓜群众强势围观
                </label>

                <input type="radio" id="T" name="select-4" class="my-radio"/>
                <label class="bg" flex="cross:center" for="T">
                    D：肥宅选择在家喝快乐水
                </label>
            </section>
            <div flex="main:center" class="btnGroup">
                <button class="next-1" id="result">查看结果</button>
            </div>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

</div>
<!--滑动结束-->

<script src="../js/textall.js"></script>
</body>
</html>